<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style>
  .layui-upload-img{
    height: 92px;
    width: 92px;
    margin: 0 10px 10px 0;
  }
</style>
<body>
          
              
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>商品新增</legend>
</fieldset>
 
<div class="layui-form layuimini-form">
  <div class="layui-form-item" id="parentid1">
    <label class="layui-form-label">商品类型</label>
    <div class="layui-input-block">
        <input type="text" id="categoryid" name="categoryid" lay-filter="categoryid" class="layui-input">
    </div>
</div>
  
<div class="layui-form-item">
    <label class="layui-form-label">商品序列号</label>
    <div class="layui-input-block">
      <input type="text" name="goodsn" id='goodsn' lay-verify="required" autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">商品名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" id='name' lay-verify="required" autocomplete="off" class="layui-input">
  </div>
</div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">排序</label>
      <div class="layui-input-inline">
        <input type="number" name="sort" id='sort' lay-verify="required|number" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">价格</label>
      <div class="layui-input-inline">
        <input type="number" name="price" id='price' lay-verify="required|number" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">数量</label>
      <div class="layui-input-inline">
        <input type="number" name="goodnumber" id='goodnumber' lay-verify="required|number" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">已售数量</label>
      <div class="layui-input-inline">
        <input type="number" name="goodsellnumber" id='goodsellnumber' lay-verify="required|number" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品主图</label>
    <div class="layui-input-block">
        <input type="tel" name="masterpicurl" id='masterpicurl' lay-verify="required|url" autocomplete="off" class="layui-input" readonly>
        <button type="button" class="layui-btn" id="test1">上传图片</button>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品列表图</label>
    <div class="layui-input-block">
        <input type="tel" name="listpicurl" id='listpicurl' lay-verify="required|url" autocomplete="off" class="layui-input" readonly>
        <button type="button" class="layui-btn" id="test2">上传图片</button>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品明细展示图</label>
    <div class="layui-input-block">
      <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
        预览图：
        <div class="layui-upload-list" id="demo3"></div>
     </blockquote>
      <button type="button" class="layui-btn" id="test3">多图片上传</button>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">商品介绍</label>
    <div class="layui-input-block">
      <textarea class="layui-textarea" id="LAY_demo1" style="display: none" >  
        
      </textarea>
    </div>
  </div>

  <div class="layui-form-item" pane="">
    <label class="layui-form-label">状态</label>
    <div class="layui-input-block">
        <input type="radio" name="status" value="1" title="有效" checked="">
        <input type="radio" name="status" value="0" title="无效">
    </div>
</div>


  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn layui-btn-radius" lay-submit="" lay-filter="demo1" id='saveBtn'>立即提交</button>
      <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
      <button class="layui-btn layui-btn-radius layui-btn-primary"  id="backBtn">返回</button>
    </div>
  </div>
</div>

          
<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/js/custorm/init.js" charset="utf-8"></script>
<script src="/lib/jquery-3.5.1/jquery-3.5.1.min.js" charset="utf-8"></script>
<script src="/js/lay-config.js" charset="utf-8"></script>
<script>
   var imageList=new Array();
   var VMGoods={'categoryid':0,'goodsn':0,'name':'','status':true,'goodsellnumber':0,'goodnumber':0,'masterpicurl':'','listpicurl':'','price':0,'sort':0,'imageList':[],'goodhtml':''};
  function delImage(data){
    //console.log(data);
    imageList.forEach(function(item, index, arr) {
    if(item.ids ==data.id) {
        arr.splice(index, 1);
        var parentObj = data.parentNode;//获取div的父对象
　　    parentObj.removeChild(data);//通过div的父对象把它删除
    }
});
    
  }
</script>
<script>
layui.use(['form', 'layedit', 'laydate','upload','treeSelect'], function(){
  var form = layui.form
  ,$ = layui.jquery
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate,upload = layui.upload
  ,treeSelect=layui.treeSelect;
 
  var index=0;
  HavePermission('goods-add')==true?$("#saveBtn").show():$("#saveBtn").hide();
   ///商品主图
    var uploadInst = upload.render({
    elem: '#test1'
    ,url: '../../api/sys/UpdateFile' 
    ,done: function(res){
      if(res.resultCode ==0){
        $('#masterpicurl').val(res.data.url);
        return layer.msg('上传成功');
      }else{
        return layer.msg('上传失败：'+res.resultMsg);
      }
    }
    ,error: function(){
        return layer.msg('上传失败');
    }
  });
  ///商品列表图
  var uploadInst = upload.render({
    elem: '#test2'
    ,url: '../../api/sys/UpdateFile' 
    ,done: function(res){
      if(res.resultCode ==0){
        $('#listpicurl').val(res.data.url);
        return layer.msg('上传成功');
      }else{
        return layer.msg('上传失败：'+res.resultMsg);
      }
    }
    ,error: function(){
        return layer.msg('上传失败');
    }
  });

var edit = layedit.build('LAY_demo1');
upload.render({
    elem: '#test3'
    ,url: '../../api/sys/UpdateFile'  //改成您自己的上传接口
    ,multiple: true
    ,done: function(res){
      $('#demo3').append('<img src=data:image/png;base64,'+ res.data.file +' class="layui-upload-img" title="双击删除" id='+index+' ondblclick="delImage(this);">');
      var image={"ids":index,"url":res.data.url};
      imageList.push(image);
      index++;
    }
  });


  treeSelect.render({
      // 选择器
      elem: '#categoryid',
      // 数据
      data: '../../api/Tree/GetAllGoodsTypeTree',
      // 异步加载方式：get/post，默认get
      type: 'get',
      // 占位符
      placeholder: '请选择商品类型',
      // 是否开启搜索功能：true/false，默认false
      search: true,
      async: {
          enable: false
      },
      // 点击回调
      click: function (d) {
          //parentguid=
          typeid = parseInt(d.current.id);
          console.log(d);
      },
      // 加载完成后的回调函数
          success: function (d) {
          typeid=1;
          treeSelect.checkNode('categoryid', 1);
          treeSelect.refresh();
      }
  });
  var typeid=0;
form.on('submit(demo1)', function(data){
  if(typeid==0){
    return layer.msg('请选择类型');
  }
  VMGoods=data.field;
  console.log(layedit.getContent(edit));
  VMGoods.goodhtml=layedit.getContent(edit);
  var imageLi=new Array();
  imageList.forEach(function(item, index, arr) {
    imageLi.push(item.url);
//     if(item.ids ==data.id) {
//         arr.splice(index, 1);
//         var parentObj = data.parentNode;//获取div的父对象
// 　　    parentObj.removeChild(data);//通过div的父对象把它删除
//     }
  });

  VMGoods.imageList=imageLi;
  VMGoods.categoryid=typeid;
  VMGoods.sort=parseInt(data.field.sort);
  VMGoods.price=parseFloat(data.field.price);
  VMGoods.goodnumber=parseInt(data.field.goodnumber);
  VMGoods.goodsellnumber=parseInt(data.field.goodsellnumber);
  VMGoods.status=data.field.status=='1'?true:false;
  AxajPost('../../api/shop/AddGoods',VMGoods,'保存成功','../../login.html');
  return;
});

$("#backBtn").click(function () {
    window.location.href="../goods.html";
});
});


</script>

</body>
</html>